<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/bottom-area.css" />
		<script src="js/modernizr.custom.js"></script>
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			img{
				width: 88px;
				height: 88px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content">
				<header class="codrops-header">
					<h1>Drag and Drop Interaction Ideas <span>Inspiration for drag and drop interactions for the modern UI</span></h1>
					<nav class="codrops-demos">
						<a class="current-demo" href="index.html">Bottom Area</a>
						<a href="sidebar.html">Sidebar</a>
						<a href="page-scale.html">Page Scale</a>
						<a href="modal.html">Modal</a>
						<a href="icons.html">Icons</a>
						<a href="bottom-slide.html">Bottom Slide</a>
						<a href="reveal.html">Reveal</a>
					</nav>
				</header>
				<div id="grid" class="grid clearfix">
					<div id="0" class="grid__item" style="background: url('images/chuyu1.png')no-repeat center center;background-size: 88px 88px;"></div>
					<div id="1" class="grid__item" style="background: url('images/chuyu2.png')no-repeat center center;background-size: 88px 88px;"></div>
					<div id="2" class="grid__item" style="background: url('images/chuyu3.png')no-repeat center center;background-size: 88px 88px;"></div>
					<div id="3" class="grid__item" style="background: url('images/youhai1.png')no-repeat center center;background-size: 88px 88px;"></div>
					<div id="4" class="grid__item" style="background: url('images/youhai2.png')no-repeat center center;background-size: 88px 88px;"></div>
					<div id="5" class="grid__item" style="background: url('images/youhai3.png')no-repeat center center;background-size: 88px 88px;"></div>
					<div id="6" class="grid__item" style="background: url('images/kehui1.png')no-repeat center center;background-size: 88px 88px;"></div>
					<div id="7" class="grid__item" style="background: url('images/kehui2.png')no-repeat center center;background-size: 88px 88px;"></div>
					<div id="8" class="grid__item" style="background: url('images/kehui3.png')no-repeat center center;background-size: 88px 88px;"></div>
					<div id="9" class="grid__item" style="background: url('images/qita1.png')no-repeat center center;background-size: 88px 88px;"></div>
					<div id="10" class="grid__item" style="background: url('images/qita2.png')no-repeat center center;background-size: 88px 88px;"></div>
					<div id="11" class="grid__item" style="background: url('images/qita3.png')no-repeat center center;background-size: 88px 88px;"></div>
				</div>
	
			</div><!-- /content -->
		</div><!-- /container -->
		<div id="drop-area" class="drop-area">
			<div>
				<div class="drop-area__item" id="x"><div class="dummy"></div></div>
				<div class="drop-area__item" id="y"><div class="dummy"></div></div>
				<div class="drop-area__item" id="z"><div class="dummy"></div></div>
				<div class="drop-area__item" id="w"><div class="dummy"></div></div>
			</div>
		</div>
		<div class="drop-overlay"></div>
		<script src="js/draggabilly.pkgd.min.js"></script>
		<script src="js/dragdrop.js"></script>
		<span id="hide" style="display: none;"></span>
		<script>
		$(function(){
			var data = ['images/chuyu1.png','images/chuyu2.png','images/chuyu3.png','images/youhai1.png','images/youhai2.png','images/youhai3.png','images/kehui1.png','images/kehui2.png','images/kehui3.png','images/qita1.png','images/qita2.png','images/qita2.png'];
			[].slice.call( document.querySelectorAll( '#grid .grid__item' )).forEach( function( el ) {
				do
				{
					rand = parseInt(Math.random() * 12);//0-11
				}while(!data[rand]);
				$(el).attr('id', rand);
				$(el).css("background", "url("+data[rand]+")no-repeat center center");
				$(el).css("background-size", "88px 88px");
				data[rand] = '';
			});
		});
			(function() {
				$('#0,#1,#2,#3,#4,#5,#6,#7,#8,#9,#10,#11').on('touchmove', function(){
					$('#hide').html($(this).attr('id'));
					//alert($(this).attr('id'));
				});
				var body = document.body,
					dropArea = document.getElementById( 'drop-area' ),
					droppableArr = [], dropAreaTimeout;

				// initialize droppables
				[].slice.call( document.querySelectorAll( '#drop-area .drop-area__item' )).forEach( function( el ) {
					droppableArr.push( new Droppable( el, {
						onDrop : function( instance, draggableEl ) {
							// show checkmark inside the droppabe element
							classie.add( instance.el, 'drop-feedback' );
							clearTimeout( instance.checkmarkTimeout );
							if($(el).attr('id') == 'x')
							{
								if($('#hide').html()>=0 && $('#hide').html()<=2)
								{
									$('#' + $('#hide').html()).hide();
								}
							}
							if($(el).attr('id') == 'y')
							{
								if($('#hide').html()>=3 && $('#hide').html()<=5)
								{
									$('#' + $('#hide').html()).hide();
								}
							}
							if($(el).attr('id') == 'z')
							{
								if($('#hide').html()>=6 && $('#hide').html()<=8)
								{
									$('#' + $('#hide').html()).hide();
								}
							}
							if($(el).attr('id') == 'w')
							{
								if($('#hide').html()>=9 && $('#hide').html()<=11)
								{
									$('#' + $('#hide').html()).hide();
								}
							}
							
							instance.checkmarkTimeout = setTimeout( function() { 

								classie.remove( instance.el, 'drop-feedback' );
								
							}, 800 );
							// ...
						}
					} ) );
				} );

				// initialize draggable(s)
				[].slice.call(document.querySelectorAll( '#grid .grid__item' )).forEach( function( el ) {
					new Draggable( el, droppableArr, {
						draggabilly : { containment: document.body },
						onStart : function() {
							// add class 'drag-active' to body
							classie.add( body, 'drag-active' );
							// clear timeout: dropAreaTimeout (toggle drop area)
							clearTimeout( dropAreaTimeout );
							// show dropArea
							classie.add( dropArea, 'show' );
						},
						onEnd : function( wasDropped ) {
							var afterDropFn = function() {
								// hide dropArea
								classie.remove( dropArea, 'show' );
								// remove class 'drag-active' from body
								classie.remove( body, 'drag-active' );
							};

							if( !wasDropped ) {
								afterDropFn();
							}
							else {
								// after some time hide drop area and remove class 'drag-active' from body
								clearTimeout( dropAreaTimeout );
								dropAreaTimeout = setTimeout( afterDropFn, 400 );
							}
						}
					} );
				} );
			})();
		</script>
	</body>
</html>
